<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="ku/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="ku/bootstrap-icons-1.10.3/bootstrap-icons.css">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			table {
				border-collapse: collapse;
				border-spacing: 0;
			}

			.head {
				background-color: black;
				color: white;
			}

			.head th {
				border: 1px solid lightgray;
			}

			.part td {
				border: 1px solid lightgray;
			}
		</style>
	</head>
	<body>
		<table id="app" cellpadding="20" width="100%">
			<thead class="head" align="center">
				<tr>
					<th v-on:click="handleSort('id')" @click="isId = !isId">ID
						<i :class="{'bi-caret-up' : isId}"></i>
						<i :class="{'bi-caret-down' : !isId}"></i>
					</th>
					<th>商品</th>
					<th v-on:click="handleSort('price')" @click="isName = !isName">价格
						<i :class="{'bi-caret-up' : isName}"></i>
						<i :class="{'bi-caret-down' : !isName}"></i>
					</th>
					<th v-on:click="handleSort('number')" @click="isNumber = !isNumber">销量
						<i :class="{'bi-caret-up' : isNumber}"></i>
						<i :class="{'bi-caret-down' : !isNumber}"></i>
					</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody class="part" align="center">
				<tr v-for="(good,index) in goods" v-bind:key="good.id">

					<td>{{good.id}}</td>
					<td>{{good.name}}</td>
					<td>{{good.price}}</td>
					<td>{{good.number}}</td>
					<td>
						<button v-on:click="goods.shift()" type="button">x</button>
					</td>
				</tr>
			</tbody>

		</table>
		<script>
			var app = new Vue({
				el: "#app",
				data: {

					goods: [
						{ id: 1, name: '水杯', price: 10, number: 800 },
						{ id: 2, name: '鼠标', price: 30, number: 300 },
						{ id: 3, name: '纸巾', price: 20.5, number: 1800 },
						{ id: 4, name: '数据线', price: 40.5, number: 200 },
						{ id: 5, name: '键盘', price: 69.9, number: 600 },
						{ id: 6, name: '儿童玩具', price: 50, number: 400 },
						{ id: 7, name: '相框', price: 70, number: 700 },
						{ id: 8, name: '外套', price: 80, number: 500 },
					],
					order: 1,
					isId: true,
					isName: true,
					isNumber: true,

				},
				methods: {
					handleSort: function(item) {
						console.log(item);
						var self = this;
						if (item === 'id') {

							this.goods.sort(function(goodA, goodB) {
								return (goodA.id - goodB.id) * self.order;
							});

							this.order = -this.order;
						}
						if (item === 'price') {
							this.goods.sort(function(goodA, goodB) {
								return (goodA.price - goodB.price) * self.order;
							});
							this.order = -this.order;
						}
						if (item === 'number') {
							this.goods.sort(function(goodA, goodB) {
								return (goodA.number - goodB.number) * self.order;
							});
							this.order = -this.order;
						}

					}
				},
			})
		</script>
		<script src="ku/bootstrap-5.3.0-alpha1-dist/js/bootstrap.js"></script>

	</body>
</html>
